<template>
  <div>
    <h1>一个人的信息：</h1>
    <!-- 页面上发现属性变成了ref对象后，会帮我们调用 .value，所以直接写属性名就行了 -->
    <h2>姓名：{{ name }}</h2>
    <h2>年龄：{{ age }}</h2>
    <h2>职位：{{ job.type }}</h2>
    <h2>薪资：{{ job.salary }}</h2>
    <h2>爱好：{{ hobby }}</h2>
    <button @click="changeInfo">修改信息</button>
  </div>
</template>

<script>
// 使用ref需要导入
import { reactive, ref } from "vue";

export default {
  name: 'ref_test',
  setup() {   // setup函数可以传入2个参数：props, context
    // props参数：值为对象，包含组件外部传来的，且组件内声明接收了的属性，和vue2中的props有点类似，但不一样
    // context参数：上下文对象
    //              attrs: 值是对象，包含组件外部传来的，但没有在props配置中声明的属性，相当于 this.$attrs
    //              slots：收到插槽内容，相当于 this.$slots
    //              emit:  分发自定义事件的函数，相当于 this.$emit 

    // 使用ref处理，这样就变成响应式的了
    let name = ref('张三')
    let age = ref(18)
    // 对于对象的处理，使用reactive，就是使用ref，里面还是调用的reactive
    // 如果想直接拿到值，那就使用reactive
    let job = reactive({
      type: '后端工程师',
      salary: '30k',
    })
    // 对于数组处理，也推荐使用 reactive
    let hobby = reactive(['抽烟', '喝酒', '烫头'])

    function changeInfo() {
      // 使用ref处理后，属性就变成了引用实例对象，简称ref对象
      console.log(name, age);
      // 因为ref处理后变成了实例对象，所以就要通过给它的value赋值才能修改成功
      // 对基本属性，ref处理后是refImpl对象
      name.value = '李四'
      age.value = 20

      // 对于对象类型，ref处理后是把Proxy对象放入的value中
      // 但使用reactive处理对象，就可以直接拿到处理对象的Proxy
      console.log(job);
      // 使用了reactive来处理对象，所以不用去 .value 
      job.type = '全栈工程师'
      job.salary = '50k'

      // 修改 reactive 处理过的数组
      hobby[0] = '熬夜',
        hobby[1] = '学习',
        hobby[2] = '编码'
    }

    return {
      name,
      age,
      changeInfo,
      job,
      hobby
    }

    // 总结：使用 reactive 更香~  不用一直 .value
    // 属性类型多时候，直接都给封装一个对象里，然后使用reactive处理
  }
}
</script>
